<template>
  <div class="more">
      <van-popup v-model="show" class="mypop">
          <van-cell-group v-if="isReport === false">
            <van-cell title="不感兴趣" icon="bill-o" @click="dislike" />
            <van-cell class="bor" title="反馈内容" icon="warn-o" is-link @click="isReport = true"/>
            <van-cell title="拉黑作者" @click="blackLike" icon="delete" />
          </van-cell-group>
          <van-cell-group v-else>
            <van-cell @click="isReport=false" icon="arrow-left"></van-cell>
            <van-cell @click="report(item.type)" v-for="(item, index) in reportType" :key="index" :title="item.name"></van-cell>
          </van-cell-group>
          {{artId }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {{autId}}
      </van-popup>
  </div>
</template>

<script>
import { apiDisLike, apiReport, apiBlackLike } from '@/api/article.js'
export default {
  props: ['artId', 'autId'],
  data () {
    return {
      show: false,
      isReport: false,
      reportType: [
        { type: 0, name: '其他问题' },
        { type: 1, name: '标题夸张' },
        { type: 2, name: '低俗色情' },
        { type: 3, name: '错别字多' },
        { type: 4, name: '旧闻重复' },
        { type: 5, name: '广告软文' },
        { type: 6, name: '内容不实' },
        { type: 7, name: '涉嫌违法犯罪' },
        { type: 8, name: '侵权' }
      ]
    }
  },
  methods: {
    // 不喜欢
    async dislike () {
      // 将artId对应的数据从文章列表中删除,因为数据在父组件中所以需要子组件调用父组件的方法
      this.$emit('delDislike', this.artId)
      // 将文章信息提交到服务器标记不喜欢
      const res = await apiDisLike(this.artId)
      window.console.log(res)
    },

    // 举报
    async report (type) {
      await apiReport({
        artid: this.artId,
        type: type
      })
      this.$toast.success('您的反馈已被接收')
      // 关闭举报面板
      this.isReport = false
      // 关闭弹窗
      this.show = false
    },

    // 拉黑
    async blackLike () {
      const res = await apiBlackLike(this.autId)
      window.console.log('拉黑:', res)
      // 关闭弹窗
      this.show = false
      this.$toast.success('该作者已被拉黑')
    }
  }
}
</script>

<style lang="less">
.more{
    .mypop{
        width: 90%;
        border-radius: 5px;
        .bor{
          border-bottom:1px solid #ccc;
          border-top: 1px solid #ccc;
        }
    }
}
</style>
